<mat-progress-bar *ngIf="loading && firstLoad"
                  mode="indeterminate">
</mat-progress-bar>
<div *ngIf="data"
     class="omv-dashboard-widget-smart-status"
     gdGap="1px"
     gdColumns="repeat(auto-fit, minmax(100px, 1fr))">
  <div *ngFor="let device of data.data"
       class="item omv-text-center omv-text-nowrap"
       [ngClass]="{'omv-background-color-theme-error': ['BAD_ATTRIBUTE_NOW', 'BAD_ATTRIBUTE_IN_THE_PAST', 'BAD_SECTOR', 'BAD_SECTOR_MANY'].includes(device.overallstatus), 'omv-background-color-theme-gray': 'BAD_STATUS' === device.overallstatus, 'omv-background-color-theme-success': 'GOOD' === device.overallstatus}"
       [matTooltip]="overallStatusDescription[device.overallstatus] | translate"
       routerLink="/storage/smart/devices/details/{{ device.devicefile | encodeUriComponent }}">
    {{ device.canonicaldevicefile }}
  </div>
</div>
